设为首页收藏本站
开启辅助访问

CSS3之边框border、box

 您所在的位置：网站首页 › css 设置边框重叠 › CSS3之边框border、box

CSS3之边框border、box

2022-11-28 04:56| 来源: 网络整理| 查看: 265

border

　　语法：border: border-width border-style border-color

　　border属性是一个用于设置各种单独边界属性的简写属性。border可以用于设置于一个或多个属性值, 若有缺省属性，则其缺省属性会被设置为浏览器默认值。但是无法像background一次设置多重背景一样同时设置多重(上下左右)的边框样式。

其中重点需要注意border对 border-image 属性的影响，虽然border不能够设置该属性，但是会把该属性重置为初始值none

border-width 定义

　　border-width属性设置盒子模型边框的宽度,边框四个方向的综合简写。

　　border-width可以同时分别设置边框四个方向的宽度,可细粒度分为border-top-width、border-right-width、border-bottom-width、border-left-width,这四个属性都可以当单独属性进行使用，与margin用法相同。

　　border-width接收的参数个数不一样时，表示四个方向不同边框的宽度；其中border-color、border-style两个属性的参数个数特性与border-width一致

一个值 四个方向的边框方向同时设置为当前值 两个值 前一个值表示上下边框宽度，后两个值表示左右边框宽度 三个值 第一个值表示 上边框宽度；第二个值表示 左右边框宽度；第三个值 表示下边框宽度 四个值 第一个值表示 上边框宽度；第二个值表示 右边框宽度； 第三个值表示下边框宽度；第四个值表示左边框宽度 // html部分 一个属性值 两个属性值 三个属性值 四个属性值 // style部分 .box { display: inline-block; width: 150px; height: 150px; margin: 20px; border-color: pink green yellow purple; border-style: solid; } .one { border-width: 10px; } .two { border-width: 10px 15px; } .three { border-width: 10px 15px 20px; } .four { border-width: 10px 15px 20px 25px; } 复制代码

image.png

属性值 全局关键字: inherit - 继承父级样式， 仅对有继承特性的属性有效 initial - 初始化为css规范中的默认值, 可用于css中所有属性 revert - 还原浏览器内置样式， 可用于css中所有属性 unset - 若有从父级继承的值(可继承且有定义)，则相当于inherit，若为非继承属性 则类似initial，可用于css中所有属性。最好是搭配all属性使用 专有关键字: thin、medium、thick 数值类型: length(不支持百分比)

image.png

默认值

　　border-width: medium为官方默认值。medium默认一般为 3px，原因是当border-style: double时，若想双线条展示出来，最低要有 3px。实测在谷歌浏览器中，其默认值偶尔为 1.5px。偶尔为 3px why?????

image.png

image.png

border-style

　border-style是用来设定元素所有边框的样式简写属性。其中四个边框样式属性与border-width一样可以分别使用：border-top-style、border-right-style、border-bottom-style、border-left-style

属性值 属性值定义none默认值。关键字 hidden 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，none 值优先级最低，意味着如果存在其他的重叠边框，则会显示为那个边框。hidden和关键字 none 类似，不显示边框。在这种情况下，如果没有设定背景图片，border-width 计算后的值将是 0，即使先前已经指定过它的值。在单元格边框重叠情况下，hidden 值优先级最高，意味着如果存在其他的重叠边框，边框不会显示dotted显示为一系列圆点。标准中没有定义两点之间的间隔大小，视不同实现而定。圆点半径是 border-width 计算值的一半。dashed显示为一系列短的方形虚线。标准中没有定义线段的长度和大小，视不同实现而定solid显示为一条实线。double显示为一条双实线，宽度是 border-width 。groove显示为有雕刻效果的边框，样式与 ridge 相反。ridge显示为有浮雕效果的边框，样式与 groove 相反。inset显示为有陷入效果的边框，样式与 outset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。outset显示为有突出效果的边框，样式与 inset 相反。当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。

border-color

　　border-color是用于设置四个边框颜色的简写属性，其中四个边框颜色属性与border-width一样可以分别使用：border-top-color、border-right-color、border-bottom-color、border-left-color。

属性值 关键字 inherit 继承 currentcolor transparent 透明颜色，用于制作三角形等形状比较多见 颜色值 十六进制 #f6f6f6 颜色 red 函数 rgb rgba hsl hsla 默认值

　　border-color的默认值为 currentColor。currentColor 关键字表示：当前元素(或伪元素)所使用的color属性的计算值。其默认值为 黑色，原因： 全局根color颜色为黑色，继承自父级

经典示例 1、透明边框

　　透明边框的关键在于 背景颜色background基于 border 之下，即使 border 设置成了透明边框，但因为在此之下还有一个背景颜色遮挡，视觉上看上去只是边框区域的背景颜色加了一点透明度。若想真正实现透明边框，需要处于 border 之下的background挪走。此处的关键属性即为 background-clip 指定背景background绘制区域。

// html 分析background和border： border在background之上 假透明边框 真透明边框: 设置背景的范围 // css .container { padding: 10px; background-color: lightskyblue; } .border-box { width: 150px; height: 150px; margin: 20px; display: inline-block; background-color: green; border: 15px solid hsla(0,0%,100%,.5); /* 内联元素的默认值为baseline，两行的会向上一个line-height */ vertical-align: middle; color: white; } .background { background-clip: padding-box; } .example { background-color: green; border: 15px dashed red; } 复制代码

image.png

2、三角形

　　在设计三角形/梯形等图形时，必须了解一个css关键字 transparent，transparent 用来指定全透明的色彩，是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0) 这样的值。重点关注 透明 的特性，即在border中使用时在视觉上会显示出父级的背景色。只需要将不想要展示的 border-color 设置为此关键字即可

// css .basic { width: 20px; height: 20px; margin: 20px; display: inline-block; border-width: 50px; border-style: solid; border-color: lightblue lightcoral lightgreen lightseagreen; } .none-width { width: 0px; height: 0px; } .triangle-one { border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; } .triangle-two { border-top-color: transparent; border-right-color: transparent; } .triangle { margin: 20px; display: inline-block; border-style: solid; border-width: 50px 100px; border-top-color: transparent; border-right-color: transparent; border-bottom-color: lightseagreen; border-left-color: lightskyblue; } 复制代码

image.png

3、勾 和 箭头

　　勾 和箭头 实际上只是在三角形的基础上，对边的宽度以及角度两者结合使用展示出不同的效果

// html // css .tick { width: 50px; height: 50px; margin: 30px; display: inline-block; border-style: solid; /* border-width可以不写哦，会默认成浏览器内置的大小 css规范就是3px */ border-width: 3px; /*可简写: border-color: transparent lightseagreen lightseagreen transparent;*/ border-top-color: transparent; border-right-color: lightseagreen; border-bottom-color: lightseagreen; border-left-color: transparent; transform: rotate(-45deg); } .arrow { width: 50px; height: 84px; transform: rotate(45deg); } 复制代码

image.png

4、综合案例 三道杠

　　三道杠这个示例运用到padding、background一些属性以及border，需要重点关注的是： 当border连接处另外两侧的border没有设置时，表现为一个矩形而不是正方形。还有一个比较新的属性值 currentColor 的使用, 借助此属性可以很方便的统一 background-color和border-color。currentColor 表示当前元素 父级元素的color值

// html // css .parent { color: lightskyblue; } .single { width: 150px; height: 150px; margin: 20px; display: inline-block; border-top: 10px solid lightseagreen; border-bottom: 10px solid lightseagreen; background-color: red; } .three-line { height: 10px; padding: 30px 0px; background-clip: content-box; } .currentColor { border-top: 10px solid; border-bottom: 10px solid; background-color: currentColor; } 复制代码

image.png

　　虽然border在边框画图等展示方面实力强悍，但如果需要多层边框时，也会存在力所不及的情况。因此我们可以寻找到其类似的兄弟属性来合作。

outline

　　outline 表示元素的轮廓，语法与border属性十分类似，分width、style和color。支持的关键字和属性与border属性一致，在此就不再详细写此属性的属性值分析。border-radius对此属性同样其作用。但此属性与border存在一个重大的区别：outline不占据任何空间。

outline-offet

　　outline-offset属性设置轮廓框架相对 border 边缘的偏移，支持负值

border 边缘外的偏移 .offset { width: 150px; height: 150px; margin: 20px; padding: 15px; color: #fff; background-color: #655; border: 5px double lightseagreen; outline: 5px double lightsalmon; outline-offset: -12px; } 复制代码

image.png

案例 1、hover高亮元素，不影响布局

　　在一些排版固定的场景下，若有需求hover状态需要元素边界高亮，甚至是扩展向外高亮时。解决方案有如下几种

增加border的宽度则会使得现有排版尺寸出现问题； 使用伪元素，但此方法过于繁琐。 比较推荐的方式是使用不占据空间(即不会改变布局) 的元素来处理此场景。推荐的属性有: outline、box-shadow。更常用的为 box-shadow // html 我是一大段的文字，注意div会有空隙，此处涉及内联元素、white-space相关知识 点击高亮 点击高亮 点击高亮 // css .outline { width: 336px; height: 112px; border: 1px solid lightskyblue; /* 清除white-space合并空白字符导致的间隙 */ /* word-spacing: -5px; */ } .highlight { width: 110px; height: 110px; display: inline-block; border: 1px solid rgb(143, 143, 245); } /* 清除white-space合并空白字符导致的间隙 */ .highlight:not(:first-child) { margin-left: -5.4px; } .highlight:hover { outline: 10px solid lightcoral; } 复制代码

image.png

2、自动填满屏幕剩余空间 我是一大段的文字，注意div会有空隙，此处涉及内联元素、white-space相关知识 点击高亮 点击高亮 点击高亮 Designed ; 学css 到张鑫旭 // css body { margin: 20px 0px 0px 20px; } .outline { width: 336px; height: 112px; border: 1px solid lightskyblue; /* 清除white-space合并空白字符导致的间隙 */ /* word-spacing: -5px; */ } .highlight { width: 110px; height: 110px; display: inline-block; border: 1px solid rgb(143, 143, 245); } /* 清除white-space合并空白字符导致的间隙 */ .highlight:not(:first-child) { margin-left: -5.4px; } .highlight:hover { outline: 10px solid lightcoral; } .footer { height: 50px; } .footer > p { position: absolute; left: 0; right: 0; text-align: center; padding: 15px 0; background-color: #a0b3d6; outline: 9999px solid #a0b3d6; /* 根据当前元素所在的位置进行裁剪 clip: rect(top right bottom left) */ clip: rect(0 9999px 9999px 0); } 复制代码

image.png

3、两层边框

　　outline属性相对于 box-shadow 来比，只能多加一层边框(特殊情况下，outline与border都使用double 可实现四层)， outline的优势之处在于参考(outline-offset图片)：能够自由的使用与border一致的样式，包括 dashed 虚线等

两层边框 // css .two-border { width: 150px; height: 150px; margin: 20px; border: 5px solid lightseagreen; outline: 5px solid lightsalmon; } 复制代码

image.png

box-shadow

　　box-shadow: [inset] x-offset y-offset blur-radius spread-radius color;

　　box-shadow 属性可以设置一个或多个下拉阴影的框，多个阴影之间使用逗号,分隔。 颜色（color）也可以放在最前面的，inset值也可以放在最后面。box-shadow 与 outline 一样不属于盒模型的元素，不占据元素空间，不会影响界面布局，border-radius也起作用

属性值 & 默认值 属性值描述x-offset必填 阴影水平偏移量，它可以是正负值。如为正值，则阴影在元素的右边；如其值为负值，则阴影在元素的左边y-offset必填 阴影垂直偏移量，它可以是正负值。如为正值，则阴影在元素的底部；如其值为负值时，则阴影在元素的顶部blur-radius可选 阴影模糊半径，它只能是正值。如值为0，则阴影不具有模糊效果；它的值越大，阴影的边缘就越模糊spread-radius可选 阴影扩展半径，它可以是正负值。如为正值，则扩大阴影的尺寸；如为负值，则缩小阴影的尺寸color可选 阴影颜色。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致。（经测试，在Safari上是半透明的，在chrome、firefox、ie上都是黑色的）。不推荐省略颜色值inset可选 ；如省略，默认是外阴影；它有且只有一个值“inset”，表示为内阴影 案例 1、单侧阴影 单侧阴影: 扩展半径抵消模糊半径，单侧不偏移 .box { width: 200px; height: 200px; margin: 60px; float: left; color: white; background-color: #655; } .single { box-shadow: 0px 10px 3px -3px lightsalmon; } 复制代码

image.png

2、多彩云朵

　　云朵的实现是使用多个阴影进行叠加形成，多层阴影直接会相互重叠，将所有阴影的颜色修改为一致即可成为一个完整的整体。阴影之间的重叠规则：写在最前面的阴影会覆盖后面写的阴影

// css .box { width: 200px; height: 200px; margin: 60px; float: left; color: white; background-color: #655; } .cloud { width: 60px; height: 50px; margin: 40px; background-color: currentColor; border-radius: 50%; box-shadow: 100px 0px 0px -10px lightcoral, 40px 0px lightcyan, 70px 15px lightsalmon, 30px 20px 0px -10px lightseagreen, 70px -15px lightskyblue, 30px -30px lightgoldenrodyellow; } 复制代码

image.png

3、多边框

阴影之间的重叠规则：写在最前面的阴影会覆盖后面写的阴影

多边框 .box { width: 200px; height: 200px; margin: 60px; float: left; color: white; background-color: #655; } .multi-border { box-shadow: 0px 0px 0px 4px lightsalmon, 0px 0px 0px 8px lightblue, 0px 0px 0px 12px lightseagreen, 0px 0px 0px 16px lightcoral, 0px 0px 0px 20px lightskyblue; } 复制代码

image.png

4、新拟物设计 // css .parent { width: 300px; height: 300px; padding: 100px; background: #e0e0e0; } .object { width: 200px; height: 200px; border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; } 复制代码

image.png

border-image

　　border-image: border-image-source border-image-slice border-image-width border-image-outset border-image-repeat

　　border-image允许再元素边框上绘制图像。使用border-image属性将会替换掉border-style属性所设置的边框样式。 border-image不受border-radius影响

　　若同时存在 border 属性和 border-image 属性，注意要将， border-image 放在后面书写，border 内置了 border-image 的所有默认值，会将其重置为初始值，使其失效

border-image想生效需要书写在border之后，border内置了border-image的默认值。 若border书写在后，会将border-image覆盖 .layout { width: 200px; height: 200px; margin: 30px; float: left; background: lightsalmon; border-image-source: url('../images/border.png'); border-image-slice: 27; border: 20px solid lightseagreen; } 复制代码

image.png

若border-image-source的值为none或者图片不能显示，border的样式则将应用border-style 复制代码 border-image-source

　　border-image-source的属性值为 类型，所有的图像类型都可以作为此属性的属性值：包括 url引入图片、渐变、svg等。默认值为：none。

border-image-slice 属性值 属性值定义number不能有单位，直接进行设置percentage百分比，如果边框图片是300px *240px,取值为25% 则剪切了图片四边 60pxfill填充，图片边界的中间部分将保留下来，默认情况下为空

border-image-slice取值个数不一样时，执行的标准与border-width一致

裁剪特性

　　border-image-slice属性会将border-image-source取到的边框背景切成九份(九宫格),再像bacground-image一样重新布置。裁剪特性是学习border-image的重中之重，需要完全理解，学会熟练裁剪九宫格的尺寸

border-image-source: url('./border-color'); border-image-slice: 27; 复制代码

　　如下图显示，引入的边框背景图片为 81px✖️81px 的图片，再使用border-image-slice剪切,当前值设置为27表示 上(线1)右(线2) 下(线3) 左(线4) 四个方向距离图像边缘 27px 的位置处进行切割

　　切割完成后如下图所示，在图中border-top-right-image,border-top-left-image,border-bottom-left-image,border-bottom-right-image四个边角部分，在border-image中没有任何展示效果。把这个四个部分(2、4、6、8部分将固定在边框的四个角)称之为盲区。而对应的border-top-image、border-right-image、border-bottom-image、border-left-image在border-image中属于展示效果。

　　上下区域的border-top-image、border-bottom-image区域受水平方向border-image-repeat效果影响。左右区域border-left-image、border-right-image受垂直方向border-image-repeat效果影响。

以上 border-top-right-image、border-top-left-image、 border-bottom-left-image、border-bottom-right-image、 border-top-image、border-right-image、border-bottom-image、 border-left-image 为了方便理解而设置。实际css属性中并不存在该类属性 复制代码 border-image-width

　　border-image-width 定义图像边框宽度。假如 border-image-width 大于已指定的 border-width，那么它将向内部(padding/content)扩展。若 borde-image-width 小于指定的 border-width, 则 borde-image 只会覆盖 border的外沿部分，borde-image 无法覆盖的内沿部分会表现与background一致。默认值为： 1，即与 border-width 一致

属性值

　　border-image-width 与 border-width 基本上一致，但两者也存在一些差异，border-image-width 不能单独设置一个方向的宽度。

数值: 数值会作为系数与 border-width 的值相乘得到宽度值 length: 指定宽度值 百分比: 百分比是相对元素自身的尺寸进行计算，水平相对width、垂直相对 height 关键字: auto， 将 border-image-slice 的值作为宽度值 1、当slice与width大小一致时，会完整展示四个盲区的图片大小，四边区域按repeat样式展示 2、width大于border-width时，border-image会向内扩展 1、width与boder-witdh一致时，border-image完整占据border的位置 2、width小于slice时，四个盲区的图片会等比例缩放 1、背景图片等比例放大 1、width小于slice，背景图片等比例缩小 2、image表现为width的大小，image只会覆盖border的最外沿，border 没被image覆盖的内沿部分会与background一致 // css .box { width: 200px; height: 200px; margin: 30px; float: left; /* 内联元素的默认值为vertical-align: baseline，多个内联元素在一起内容高度不一致会导致出现”高度差“ */ /* display: inline-block; */ background: lightsalmon; border: 20px solid lightseagreen; border-image-source: url('../images/border.png'); } .same-with-slice { border-image-slice: 27; border-image-width: 27px; } .same-with-border { border-image-slice: 27; /* 此处可不设置，因 border-image-width 默认为1 即与border-width宽度一致 */ border-image-width: 1; /* 表示 border-width * 1*/ } .big-than-slice { border-image-slice: 27; border-image-width: 36px; } .less-than-border { border-image-slice: 27; border-image-width: 10px; } 复制代码

image.png

border-image-outset

　　border-image-outset 只向外扩张，只支持正值。一个比较重要的点：border-image-outset 不会影响界面布局，css中一共三个扩张不影响界面布局的属性：outline-offset、box-shadow、border-image-outset。

属性值 属性定义length设置边框图像与边框（border-image）的距离，默认为0pxnumber代表相应的 border-width 的倍数,纯数字 不加单位 往外扩张10px 1、不影响盒模型和布局 2、多余的内沿border会表现与background一致 .box { width: 200px; height: 200px; margin: 30px; float: left; /* display: inline-block; */ background: lightsalmon; border: 20px solid lightseagreen; border-image-source: url('../images/border.png'); } .outset { border-image-slice: 27; border-image-outset: 10px; } 复制代码

image.png

border-image-repeat

　　border-image-repeat定义图片如何填充边框。或为单个值，设置所有的边框；或为两个值，分别设置水平与垂直的边框。需要注意的是 border-image-repeat无法向上述属性一样设置三个值或者四个值。border-image-repeat只能设置水平方向和垂直方向的值

属性值 属性名定义stretch默认值, 拉伸图片以填充边框repeat平铺图片以填充边框round平铺图像，当不能整数次平铺时，将根据情况放大或缩小图像space平铺图像。如果无法完整平铺所有图像，扩展空间会分布在图像周围）inherit继承父级元素的计算值。

背景图片

// html stretch repeat round space // css div { float: left; width: 100px; height: 100px; border: 10px solid goldenrod; margin: 10px;text-align: center; } .border-image-round { border-image: url('../images/border.png') 27 round; } .border-image-repeat { border-image: url('../images/border.png') 27 repeat; } .border-image-stretch { border-image: url('../images/border.png') 27 stretch; } .border-image-space { border-image: url('../images/border.png') 27 space; } 复制代码

效果图

案例 1、自适应卡片背景 图片实现边框 .tab { width: 120px; height: 40px; text-align: center; border-style: solid; border-width: 5px 5px 0px; border-image-source: url(../images/border-tab.png); border-image-slice: 5 5 0 fill; border-image-width: 5px; } 复制代码

image.png

2、条纹框 渐变 // css .gradient { width: 120px; height: 40px; margin: 20px; text-align: center; border: 5px solid; border-image: repeating-linear-gradient(-135deg, lightsalmon, lightsalmon 5px, transparent 5px, transparent 10px) 5; } 复制代码

image.png

border-radius(边框半径)

　　border-radius允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径(水平方向和垂直方向)时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。border

　　border-radius该属性是一个 简写属性，是为了将这四个属性 border-top-left-radius、border-top-right-radius、border-bottom-right-radius，和 border-bottom-left-radius 简写为一个属性。即使元素没有边框，圆角也可以用到background 上面，具体效果受background-clip影响。

　　border-radius 的单值、双值、三值、四值用法与 border-width 一致。满足 上右下左 的顺序

单值表示全部角； 双值： 前一个表示top-left、bototm-right，后一个表示top-right、bottom-left； 三值：第一个表示top-left 第二个表示top-right、bottom-left，第三个表示bototm-right； 四值: 分别表示top-left，top-right，bototm-right，bottom-left 　　 border-radius可以设置水平方向与垂直方向上的值，如果同时设置水平与垂直两者之间需要使用/分隔。如果单独设置border-xx--xx-radius中某一个方向的水平与垂直方向上可以用/分隔， 也可以用空格分隔

如果border-radius的值小于border-width，border内边框仍然会是直角

border-radius 角度练习 垂直、水平设置，一个角度 垂直、水平设置，多角度 // css .one-angle { background: url('../images/background.jpeg'); background-size: contain; /* border-top-left-radius: x方向 y方向 */ border-top-left-radius: 20px 40px; } .multi-angle { /* border-top-left-radius: 40px 20px; border-top-right-radius: 60px 80px; border-bottom-right-radius: 10px 70px; border-bottom-left-radius: 30px 100px; */ background: url('../images/background.jpeg'); background-size: contain; border-radius: 40px 60px 10px 30px / 20px 80px 70px 100px; } 复制代码

image.png

以上属性，综合 渐变、背景、svg、动画等属性能有更加炫酷的效果。多多练习，推荐 css揭秘 勤加练手。codepen 上也有不少案例，fighting 坚持练习，深入理解属性

参考资料：

css世界(张鑫旭大侠系列) MDN文档 揭秘css


【本文地址】


今日新闻

推荐新闻

CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3